<template>
  <el-row>
    <el-col>
      <div style="overflow-y: auto;height: 800px;background-color: rgba(66,185,131,0)">
        <!--操作按钮-->
        <div style="text-align: left">
          <el-button style="margin:-10px 10px 10px" type="text" size="medium" @click="isList = !isList"
          >列表/表格
          </el-button>
        </div>
        <!--表格-->
        <el-table v-if="!isList" v-loading="loadingTable_articleInfo"
                  :data="currentTableData_articleInfo" style="width: 100%"
                  ref="multipleTable"
                  @selection-change="handleSelectionChange_articleInfo">
          <!--<el-table-column type="selection" width="55"/>-->
          <!--<el-table-column label="文章 id(即自增主键)" prop="articleId" align="center"/>-->
          <el-table-column label="用户名" prop="username" align="center"/>
          <el-table-column label="文章内容" prop="content" align="center">
            <template slot-scope="scope">
              <el-popover placement="top-start" trigger="hover">
                <div v-html="scope.row.content"></div>
                <el-button slot="reference" type="text">查看</el-button>
              </el-popover>
            </template>
          </el-table-column>

          <!--<el-table-column label="创建时间" prop="createTime" align="center"/>-->
          <!--<el-table-column label="修改时间" prop="updateTime" align="center"/>-->
          <el-table-column label="点赞量" prop="likes" align="center"/>
          <el-table-column label="收藏量" prop="collections" align="center"/>
          <el-table-column label="标签" prop="tags" align="center"/>
          <!--<el-table-column label="权限" prop="permissionList" align="center"/>-->
          <el-table-column label="备注" prop="remark" align="center"/>
          <!--<el-table-column label="操作" align="center">-->
          <!--  <template slot-scope="scope">-->
          <!--    &lt;!&ndash;<el-button type="primary" size="small" @click="openModifyDialog_articleInfo(scope.row)">修改</el-button>&ndash;&gt;-->
          <!--    <el-button type="danger" size="small" @click="deleteConfirm_articleInfo(scope.row)">删除</el-button>-->
          <!--  </template>-->
          <!--</el-table-column>-->
        </el-table>
        <!--列表形式展示文章   不使用表格-->
        <ArticleListCard v-if="isList" :article-info-data="currentTableData_articleInfo"/>
        <!-- 分页-->
        <div>
          <el-pagination
              @size-change="handleSizeChange_articleInfo"
              @current-change="handleCurrentChange_articleInfo"
              :current-page="currentPage_articleInfo"
              :page-sizes="[1,2,3,4,5,10, 20, 30, 50]"
              :page-size="pageSize_articleInfo"
              layout="total, sizes, prev, next, jumper"
              :total="total_articleInfo"
          /><!--去掉 pager-->
        </div>
      </div>
    </el-col>
  </el-row>

</template>
<script>
import {
  get_articleInfoInfo,
  add_articleInfoInfo,
  modify_articleInfoInfo,
  delete_articleInfoInfo,
  delete_articleInfoInfoBatch, get_articleInfoPublic
} from "@/api/articleInfo";
import {getUserName} from "@/api/token";
export default {
  name: "SearchArticles",
  watch: {
    // 监听路由传递的参数
    $route(to, from) {
      if (to.path !== '/index/home') {
        this.searchQuery = to.query.searchQuery
        this.initData_articleInfo();
      }
    }
  },
  mounted() {
    this.searchQuery = this.$route.query.searchQuery
    this.initData_articleInfo();
  },
  data() {
    return {
      // 搜索内容  可以是标题 也可以是内容
      searchQuery:'',
      // 列表或者表格显示模式
      isList:true,
      // 查询表单
      queryForm_articleInfo: {
        username: null,
        content: null,
        title:null,
        createTime: null,
        updateTime: null,
        likes: null,
        collections: null,
        tags: null,
        permissionList: null,
        remark: null,
        pageNum: 1,
        pageSize: 4
      },

      // 表格遮罩层
      loadingTable_articleInfo: true,
      // 表单对齐方式
      labelPosition_articleInfo: 'left',
      // 当前表格显示数据（前端分页后的数据）
      currentTableData_articleInfo: [],
      // 当前显示页数
      currentPage_articleInfo: 1,
      // 每页大小
      pageSize_articleInfo: 4,
      // 总数量
      total_articleInfo: 0,
    }
  },
  methods: {
    // 后端数据
    getInfoFromBack_articleInfo(queryForm) {
      get_articleInfoPublic(queryForm).then((res) => {
        this.total_articleInfo = res.data.total
        this.currentTableData_articleInfo = res.data.tableData
        this.loadingTable_articleInfo = false
      }).catch((err) => {
        console.log(err)
      })
    },
    // 前端查询
    search_articleInfo() {
      this.getInfoFromBack_articleInfo(this.queryForm_articleInfo);
    },
    //重置查询
    resetQueryForm_articleInfo() {
      // model 与 prop必填
      this.$refs["queryForm_articleInfo"].resetFields()
    },
    // 打开新增弹窗
    openAddDialog_articleInfo() {
      this.addDialogVisible_articleInfo = true
    },
    // 打开修改弹窗
    openModifyDialog_articleInfo(row) {
      // 回填
      this.modifyForm_articleInfo = {...row};
      this.modifyDialogVisible_articleInfo = true;
    },
    // 确定新增
    saveAdd_articleInfo() {
      this.$refs["addForm_articleInfo"].validate((valid) => {
        if (valid) {
          add_articleInfoInfo(this.addForm_articleInfo).then((res) => {
            this.$message.success("新增成功")
            this.cancelAdd_articleInfo()
            this.getInfoFromBack_articleInfo()
          }).catch((err) => {
            console.log(err)
          })
        }
      })
    },
    // 取消新增
    cancelAdd_articleInfo() {
      this.addDialogVisible_articleInfo = false
      this.$refs["addForm_articleInfo"].resetFields()
    },
    // 确定修改
    saveModify_articleInfo() {
      this.$refs["modifyForm_articleInfo"].validate((valid) => {
        if (valid) {
          // 保存修改
          modify_articleInfoInfo(this.modifyForm_articleInfo).then((res) => {
            this.$message.success("修改成功")
            this.cancelModify_articleInfo()
            this.getInfoFromBack_articleInfo(this.queryForm_articleInfo)
          }).catch((err) => {
            console.log(err)
          })
        }
      })
    },
    // 取消修改
    cancelModify_articleInfo() {
      this.modifyDialogVisible_articleInfo = false
    },
    // 单个删除确认框
    deleteConfirm_articleInfo(row) {
      this.deletingId_articleInfo = row.articleId;
      this.$confirm('确定要删除编号为' + row.articleId + '的信息吗？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
        // 执行删除
        this.deleteData_articleInfo(this.deletingId_articleInfo)
      }).catch(() => {
      });
    },
    //删除一个
    deleteData_articleInfo(deletingId) {
      delete_articleInfoInfo(deletingId).then((res) => {
        this.$message.success("删除成功")
        this.getInfoFromBack_articleInfo(this.queryForm_articleInfo)
      }).catch((err) => {
        console.log(err)
      })
    },
    // 批量删除
    batchDelete_articleInfo() {
      let nameArr = []
      this.selectedRows_articleInfo.forEach((row) => {
        this.idArr_articleInfo.push(row.articleId)
        nameArr.push(row.articleId)
      })
      this.$confirm('确定要删除编号为' + nameArr + '的信息吗？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
        // 执行删除
        delete_articleInfoInfoBatch(this.idArr_articleInfo).then((res) => {
          this.$message.success("删除成功")
          this.getInfoFromBack_articleInfo(this.queryForm_articleInfo)
        }).catch((err) => {
          console.log(err)
        })
      }).catch(() => {
      });

    },
    // 多选数据
    handleSelectionChange_articleInfo(rows) {
      this.selectedRows_articleInfo = rows;
    },
    // 分页栏换条数
    handleSizeChange_articleInfo(val) {
      this.queryForm_articleInfo.pageSize = val
      this.queryForm_articleInfo.pageNum = 1
      this.getInfoFromBack_articleInfo(this.queryForm_articleInfo)
    },
    // 选择页数
    handleCurrentChange_articleInfo(val) {
      this.queryForm_articleInfo.pageNum = val
      this.getInfoFromBack_articleInfo(this.queryForm_articleInfo)
    },
    // 初始化本页所需数据
    initData_articleInfo() {
      // this.queryForm_articleInfo.username = getUserName()
      // console.log('username****',this.queryForm_articleInfo.username)
      this.queryForm_articleInfo.content = this.searchQuery
      this.queryForm_articleInfo.title = this.searchQuery
      this.queryForm_articleInfo.permissionList = '00'
      this.getInfoFromBack_articleInfo(this.queryForm_articleInfo)
    },
    /**
     * 打开富文本阅读页面
     * @param articleId
     */
    openQuillReadPage(articleId) {
      this.$router.push({
        path: '/index/read-text',
        query: {
          articleId: articleId
        }
      })
    },
    /**
     * 打开富文本编辑页面
     */
    goToQuillWritePage(){
      this.$router.push({
        path: '/index/edit-text'
      })
    }
  },
}
</script>
<style scoped>
</style>